<template>
  <div v-if="isShow">
    <scroll-view v-if="userList.length" h-220rpx :scroll-with-animation="true" :scroll-y="true">
      <div py-10rpx flex flex-a-c flex-j-sb v-for="(item, index) in userList" :key="index">
        <div flex flex-a-c flex-1>
          <div>
            <image w-80rpx h-80rpx rounded-100 :src="item.face || '/static/default.png'" />
          </div>
          <div max-w-200rpx overflow-hidden ml-20rpx text-24rpx>{{ noPassByName(item.nickName) }}</div>
        </div>
        <div flex-1 flex flex-a-c flex-j-sb>
          <div text-24rpx>还差{{ item.toBeGroupedNum }}人成团</div>
          <div>
            <nut-button type="primary" size="mini" @click="join(item)">去参团</nut-button>
          </div>
        </div>
      </div>
    </scroll-view>
    <div v-else>
      <empty />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getGroupBuyUserList } from '@/api/promotion';
import empty from '@/components/empty/index.vue';
import { noPassByName } from '@/utils/filters';

const isShow = ref<boolean>(false);
const props = defineProps<{
  res: any
}>()
const userList = ref<any>([])

const emit = defineEmits(['click'])
watch(() => props.res, (newVal) => {
  isShow.value = true
  if (props?.res.promotionMap) {
    Object.keys(props?.res.promotionMap).forEach((item: any) => {
      // 拼团商品
      if (item.indexOf("PINTUAN") === 0) {
        init(props?.res.promotionMap[item]?.id)
      }
    });
  }
}, { immediate: true })

async function init(id: string) {

  const res = await getGroupBuyUserList(id)
  if (res.data.success) {
    userList.value = res.data.result
  }
}

function join(item: any) {
  emit("click", item)
}

</script>

<style scoped lang="scss"></style>
